<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <view class="trade__head u-margin-20">
      <view> 交易总额(元) </view>
      <view class="trade__money">{{ agentTradeData.transAmount }}</view>
    </view>
    <view class="statistic__card u-margin-20 u-padding-20 u-margin-top-30">
      <u-cell-item
        @click="goMyDetail()"
        :title-style="{ color: '#333333' }"
        title="拓展统计"
        :border-bottom="false"
        class="terminal__sub"
        :arrow="false"
      >
        <u-image
          class="u-margin-right-10"
          width="10rpx"
          height="40rpx"
          slot="icon"
          src="@/static/image/home/icon_line_vertical.png"
        ></u-image>
      </u-cell-item>
      <view class="flex justify-between flex-wrap">
        <view class="statistic__item">
          <view class="bold">
            {{ agentTradeData.merchantCount }}
          </view>
          <view class="tip"> 拓展商户（户） </view>
        </view>
        <view class="statistic__item">
          <view class="bold">
            {{ agentTradeData.activeMerchantCount }}
          </view>
          <view class="tip"> 激活用户 </view>
        </view>
        <view class="statistic__item u-margin-top-30">
          <view class="bold">
            {{ agentTradeData.agentCount }}
          </view>
          <view class="tip"> 拓展代理（户） </view>
        </view>
      </view>
    </view>
    <view class="statistic__card u-margin-20 u-padding-20">
      <u-cell-item
        @click="goMyDetail()"
        :title-style="{ color: '#333333' }"
        title="业绩详情(本月)"
        :border-bottom="false"
        class="terminal__sub"
        :arrow="false"
      >
        <u-image
          class="u-margin-right-10"
          width="10rpx"
          height="40rpx"
          slot="icon"
          src="@/static/image/home/icon_line_vertical.png"
        ></u-image>
      </u-cell-item>
      <view class="flex justify-between flex-wrap">
        <view class="statistic__item">
          <view class="bold">
            {{ agentTradeData.transAmount }}
          </view>
          <view class="tip"> 交易额度（元） </view>
        </view>
        <view class="statistic__item">
          <view class="bold">
            {{ agentTradeData.merchantCount }}
          </view>
          <view class="tip"> 拓展商户（户） </view>
        </view>
        <view class="statistic__item u-margin-top-30">
          <view class="bold">
            {{ agentTradeData.agentCount }}
          </view>
          <view class="tip"> 拓展代理（户） </view>
        </view>
        <view class="statistic__item u-margin-top-30">
          <view class="bold">
            {{ agentTradeData.activeMerchantCount }}
          </view>
          <view class="tip"> 激活商户（户） </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 声明你需要的属性
    agentNo: String,
  },
  data() {
    return {
      data: {},
      agentTradeData: {},
      requestBody: {
        searchDate: '',
      },
      agentMonthTradeData: {},
    };
  },
  mounted() {
    console.log('agentNo=' + this.agentNo);
    this.agentAllAchievement();
    this.requestBody.searchDate = this.traversalTime(new Date().getTime());
    this.agentAllAchievement2();
  },
  methods: {
    agentAllAchievement() {
      const _that = this;
      _that.$zx.user_api.agentAllAchievement(_that.agentNo).then((data) => {
        console.log('data=' + JSON.stringify(data));

        _that.agentTradeData = data;
      });
    },
    agentAllAchievement2() {
      const _that = this;
      _that.$zx.user_api
        .agentAllAchievement2(_that.agentNo, _that.requestBody)
        .then((data) => {
          console.log('data=' + JSON.stringify(data));

          _that.agentMonthTradeData = data;
        });
    },
    traversalTime(timestamp) {
      //timestamp(时间戳)是整数，否则要parseInt转换
      let time = new Date(timestamp);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;

      return y + '-' + this.addTimes(m);
    },
    addTimes(m) {
      return m < 10 ? '0' + m : m;
    },
  },
};
</script>

<style lang="scss" scoped>
.trade {
  &__head {
    margin-left: 10rpx;
    margin-right: 10rpx;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200rpx;
    border-radius: 20rpx;
    background-color: #9d60ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
  }

  &__money {
    font-size: 24px;
  }
}

.statistic {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 10rpx;

  &__card {
    background-color: white;
    border-radius: 20rpx;
  }

  &__item {
    display: flex;
    flex-direction: column;
    width: 290rpx;
    height: 166rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 10rpx;
    text-align: center;
    justify-content: center;
  }
}
</style>
